<template>
	<view v-if="pageShow">
		<u-navbar safeAreaInsetTop placeholder fixed autoBack>
			<view class="u-nav-slot color_ling text_weight" slot="center">
				购物车
			</view>
			<view class="u-nav-slot" slot="right" @click="guanliflag=!guanliflag">
				<text class="color_six text_a">{{guanliflag?"管理":"完成"}}</text>
			</view>
		</u-navbar>
		<view class="beijingse mainpadding">
			<view class="" style="padding-bottom: 160rpx;">
				<view class="shangbj ffffff radius mainpadding" v-for="item in gouwcnr" :key="item.id"  @click="selectitem(item)">
					<!-- <view class="flexleft" @click="selectitem(item)">
						<view class="weixz margin_right2" v-if="!item.is_checked"></view>
						<view class="margin_right2" v-if="item.is_checked">
							<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
						</view>
						<view class="strongtext">订单编号：1548642154841234</view>
					</view> -->
					<view class="flexbetween">
						<view class="">
							<view class="weixz margin_right2" v-if="!item.is_checked"></view>
							<view class="margin_right2" v-if="item.is_checked">
								<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
							</view>
						</view>
						<view class="flexbetween" style="width: 90%;">
							<image class="sptp" :src="item.image" mode=""></image>
							<view class="" style="width: 62%;">
								<view class="ershiba fonweight yhxk">{{item.title}}</view>
								<view class="strongtext xiaohui yhxk margin_top2">{{item.sku.difference}}</view>
								<view class="flexbetween margin_top4">
									<view class="sanshier fonweight xiaohong" v-if="item.is_dls_goods==0">￥{{item.sku.price}}</view>
									<view class="sanshier fonweight xiaohong" v-if="item.is_dls_goods==1">￥{{item.sku.jh_price}}</view>
									<u-number-box button-size="36" @change="changenum($event,item)" :asyncChange="true"
										color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
										v-model="item.number"></u-number-box>
									<!-- <view class="jianbox flexbetween">
										<view class="" style="padding-left: 10rpx;">
											<u-icon name="minus" color="#B4B4B4" size="14"></u-icon>
										</view>
										<view class="biak"></view>
										<view class="ershiba xiaohei textcenter" style="width: 70rpx;">1</view>
										<view class="biak"></view>
										<view class="" style="padding-right: 10rpx;">
											<u-icon name="plus" color="#333333" size="16"></u-icon>
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-if="gouwcnr.length">
				<!-- 固定底部 结算-->
				<view class="gudingdb ffffff mainpadding flexbetween" v-if="guanliflag">
					<view class="flexleft" @click="xiaoshi()">
						<view class="weixz margin_right1" v-if="!quan"></view>
						<view class="margin_right1" v-if="quan">
							<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
						</view>
						<view class="ershiba ">全选</view>
					</view>
					<view class="flexright">
						<view class="ershiba xiaohei margin_right3">合计:
							<text class="sishi xiaohong fonweight">￥{{allprice}}</text>
						</view>
						<view class="lanbtn flexcenter" @click="buy">结算</view>
					</view>
				</view>
				<!--固定底部 删除 -->
				<view class="gudingdb ffffff mainpadding flexbetween" v-else>
					<view class="flexleft" @click="xiaoshi()">
						<view class="weixz margin_right1" v-if="!quan"></view>
						<view class="margin_right1" v-if="quan">
							<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
						</view>
						<view class="ershiba ">全选</view>
					</view>
					<view class="lanbtn flexcenter" @click="scgwc">删除</view>
				</view>
			</template>
		</view>
	</view>

</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				quan: false,
				gouwcnr: [], //购物车列表内容
				allprice: 0,
				guanliflag: true,
				pageShow:true
			}
		},
		onShow() {
			this.gwclb()
		},
		watch: {
			gouwcnr: {
				handler(newValue, oldValue) {
					let isall_check = 0
					let allprice = 0
					newValue.forEach(item => {
						if (item.is_checked) {
							if(item.is_dls_goods==0){
								allprice = allprice + Number(item.sku.price) * Number(item.number)
							}else{
								allprice = allprice + Number(item.sku.jh_price) * Number(item.number)
							}
							isall_check = isall_check + 1
						}
					})
					this.allprice = allprice
					if (isall_check == this.gouwcnr.length) {
						this.quan = true
					} else {
						this.quan = false
					}
				},
				deep: true
			}
		},
		methods: {
			buy() {
				let data = {
					type: "cart", //detail=商品详情,cart=购物车
					order_type:1,
					data: []
				}
				let num = 0
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.data.push({
							goods_id: item.goods_id,
							sku_id: item.sku.id,
							number: item.number,
						})
						num = num + 1
					}
				})
				if (num == 0) {
					httpRequest.toast("请选择商品")
					return
				}
				uni.navigateTo({
					url: '/pages_homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})
				
				uni.navigateTo({
					url: "/pages_index/querendd?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 跳转商品详情
			goGoodsInfo(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpxq?id=' + id
				})
			},
			// 删除购物车
			scgwc() {
				let data = []
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.push({
							goods_id: item.goods_id,
							sku_id: item.sku.id
						})
					}
				})
				httpRequest.request('/api/cart/delCart', 'POST', {
					data
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.gwclb()
					}
				})
			},
			// 购物车列表接口
			gwclb() {
				console.log(1212);
				httpRequest.request('/api/cart/cartList', 'GET', {
					// 传参
				}, false, false, true).then(res => {
					console.log("、、、、、、、、、、、、、",res);
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "is_checked", false)
						})
						this.gouwcnr = res.data
						this.pageShow = true
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			changenum(e, item) {
				item.number = e.value
				httpRequest.request('/api/cart/clCart', 'POST', {
					goods_id: item.goods_id,
					sku_id: item.sku.id,
					number: e.value
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					// if (res.code == 1) {
					// 	this.gwclb()
					// }
				})
			},
			selectitem(item) {
				item.is_checked = item.is_checked ? false : true
			},
			// 立即购买
			atonceBuy() {
				let data = {
					msg: [],
					type: "cart" //car购物车，detail详情
				}
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.msg.push({
							goodsId: item.id,
							specType: 0,
							num: item.number
						})
					}
				})
				if (data.msg.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/gouwuche/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})

			},
			xiaoshi() {
				if (this.quan) {
					this.quan = false
					this.gouwcnr.forEach(item => {
						item.is_checked = false
					})
				} else {
					this.quan = true
					this.gouwcnr.forEach(item => {
						item.is_checked = true
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-number-box__minus {
		background-color: #FDE7E7 !important;
		width: 50rpx !important;
		height: 50rpx !important;
	}

	/deep/.u-number-box__plus {
		background-color: #FFDECB !important;
		width: 50rpx !important;
		height: 50rpx !important;
	}
	/deep/.u-number-box__input{
		width: 60rpx !important;
		height: 50rpx !important;
	}

	/deep/.uicon-minus {
		color: #000000 !important;
		font-size: 20rpx !important;
	}

	/deep/.uicon-plus {
		color: #000000 !important;
		font-size: 20rpx !important;
	}

	.lanbtn {
		width: 224rpx;
		height: 88rpx;
		background: #2361FF;
		border-radius: 245rpx 245rpx 245rpx 245rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.sptp {
		width: 196rpx;
		height: 196rpx;
		border-radius: 15rpx;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.shangbj:first-child {
		margin-top: 0rpx;
	}
</style>